<template>
    <MenuPage 
      :data="projectList" 
      :columns="projectCol"
      :page.sync="proPage"
      :size.sync="proPageSize"
      :total="proTotal"
      showSelectTag
      :selection.sync="selectAllProjects" 
      @queryFun="getProjectList">
      <template slot="search">
          <!-- <Checkbox
            ref="selectAllCheckbox"
            v-model="selectAllProject"
            title="仅选择当前页数据"
            @on-change="handleCheckAllPro"
            >选择所有</Checkbox
          > -->
          <Button type="error" ghost style="margin-left:5px;" @click="delAllProModelBtn"
            >批量删除</Button
          >
          <Button type="primary" ghost class="md-add-jh" @click="creatProBtn" style="margin-left:15px;"
            >创建{{ pageBtnTxt }}</Button
          >
<!--          <Button-->
<!--            type="primary"-->
<!--            ghost-->
<!--            class="md-add-jh"-->
<!--            v-if="showVisualization"-->
<!--            @click="goVisualization"-->
<!--            style="margin-left:15px;"-->
<!--            >大屏态势</Button-->
<!--          >-->
          <Checkbox
            v-model="myProject"
            @click.native.prevent="queryCreateOrShare('myProject')"
            style="margin-left:15px;"
          >
            <span>由我创建</span>
          </Checkbox>
          <Checkbox v-model="shareMe" @click.native.prevent="queryCreateOrShare('shareMe')">
            <span>分享给我</span>
          </Checkbox>
          <i-select
            clearable
            placeholder="全部状态"
            v-model="projectDelayStatus"
            style="width: 150px;margin-left:15px;"
            @on-change="changePro"
          >
            <i-option value="0">未部署</i-option>
            <i-option value="3">部署成功</i-option>
            <i-option value="4">删除中</i-option>
            <i-option value="6">部署失败</i-option>
            <i-option value="13">清空部署中</i-option>
            <i-option value="14">清空部署失败</i-option>
            <i-option value="17">工程导入失败</i-option>
            <i-option value="8">删除失败</i-option>
            <i-option value="15">部署校验中</i-option>
            <i-option value="9">部署中</i-option>
          </i-select>
          <!--<Select filterable clearable placeholder="全部工程" v-model="myAndAllProject" @on-change="changePro" style="width: 150px;margin-left:15px;">
                      <Option value="myProject">由我创建</Option>
                      <Option value="shareMe">分享给我</Option>
                  </Select>-->
          <Input
            v-model.trim="searchProjectname"
            placeholder="工程名称"
            clearable
            @on-change="searchProName"
            style="width: 180px;margin-left:15px;"
          />
          <Button
            class="header-btn"
            type="primary"
            ghost
            style="height: 32px;margin-left:15px;"
            @click="refreshProject()"
            ><i class="el-icon-refresh-right"
          /></Button>
      </template>

    <!-- 创建工程 -->
    <Modal
      v-model="createProModal"
      width="600"
      :mask-closable="false"
      class="creatProModal"
      :footer-hide="true"
      :title="`创建${pageBtnTxt}`"
      @on-visible-change="changeModal"
    >
      <Tabs v-model="tabName">
        <TabPane label="空白工程" name="name1">
          <creat-pro
            v-if="createProModal"
            pro-id=""
            pro-name=""
            @creatProModalStatus="conModalChange"
          ></creat-pro>
        </TabPane>
        <TabPane label="导入工程" name="name2">
          <p style="color:orange">注：只支持JSON或Excel文件</p>
          <div
            style="display: flex;justify-content: flex-start;margin-top: 15px;align-items: center;margin-left:80px"
          >
            <div style="margin-right:16px">模式</div>
            <RadioGroup v-model="mode" type="button" @on-change="changeImportType">
              <Poptip trigger="hover" title="完全导入" content="导入模板所有信息" transfer>
                <Radio label="complete">完全导入</Radio>
              </Poptip>
              <Poptip
                trigger="hover"
                title="强制导入"
                content="自动替换已丢失的镜像和配额"
                transfer
              >
                <Radio label="force">强制导入</Radio>
              </Poptip>
              <Poptip
                trigger="hover"
                title="仅拓扑结构"
                content="仅导入拓扑结构，不导入节点配置，仅支持JSON，不支持EXCEL"
                transfer
              >
                <Radio label="only_structure" :disabled="supportTopoDis">仅拓扑结构</Radio>
              </Poptip>
            </RadioGroup>
          </div>
          <div
            style="display: flex;justify-content: flex-start;margin-top: 15px;align-items: center;margin-left:57px"
          >
            <div style="margin-right:16px">文件类型</div>
            <RadioGroup v-model="verticalRadio" @on-change="changeFileType">
              <Radio label="JSON">JSON</Radio>
              <Radio label="EXCEL" :disabled="supportExcelDis">EXCEL</Radio>
            </RadioGroup>
          </div>
          <div
            v-if="verticalRadio == 'EXCEL'"
            style="display: flex;justify-content: flex-start;margin-top: 15px;align-items: center;margin-left:41px"
          >
            <div style="margin-right:16px">EXCEL模板</div>
            <Button @click="downLoadExcelTem">下载</Button>
          </div>
          <div
            v-if="verticalRadio == 'JSON'"
            style="display: flex;justify-content: flex-start;margin-top: 15px;align-items: center;margin-left:60px"
          >
            <Form :label-width="60">
              <FormItem label="文件" class="ivu-form-item ivu-form-item-required">
                <Upload
                  ref="upload"
                  :action="upLoadUrl"
                  :headers="setUpLoadHead"
                  :format="['json']"
                  :on-format-error="handleFormatError"
                  :before-upload="beforeUpload"
                  :show-upload-list="false"
                >
                  <Button icon="ios-cloud-upload-outline">上传</Button>
                </Upload>
                <WarningTip
                  content="请上传json格式文件"
                  style="position:absolute;top:0;left:85px"
                ></WarningTip>
              </FormItem>
            </Form>
          </div>
          <div
            v-if="verticalRadio == 'EXCEL'"
            style="display: flex;justify-content: flex-start;margin-top: 15px;align-items: center;margin-left:60px"
          >
            <Form :label-width="60">
              <FormItem label="文件" class="ivu-form-item ivu-form-item-required">
                <Upload
                  ref="upload"
                  :action="upLoadUrl2"
                  :headers="setUpLoadHead"
                  :format="['xlsx']"
                  :on-format-error="handleFormatError2"
                  :before-upload="beforeUpload"
                  :show-upload-list="false"
                >
                  <Button icon="ios-cloud-upload-outline">上传</Button>
                </Upload>
                <WarningTip
                  content="请上传xlsx格式文件"
                  style="position:absolute;top:0;left:85px"
                ></WarningTip>
              </FormItem>
            </Form>
          </div>
          <div
            style="line-height: 3;margin-left: 120px;text-align:start"
            v-if="uploadFile !== null"
          >
            {{ uploadFile.name }}
          </div>
          <div
            style="display: flex;justify-content: flex-start;margin-top: 15px;margin-left: 120px;"
          >
            <Button
              type="primary"
              @click="importProject"
              :loading="importProjectLoading"
              style="margin-right: 15px"
              >确定</Button
            >
            <Button @click="canleImportProModal">取消</Button>
          </div>
        </TabPane>
      </Tabs>
    </Modal>
    <!--修改工程-->
    <Modal v-model="editProjectModal" width="600" :mask-closable="false" :title="`修改${pageBtnTxt}`">
      <div>
        <Form
          ref="reProjectForm"
          :model="reProjectForm"
          :rules="reProjectRuleValidate"
          :label-width="120"
        >
          <FormItem label="工程名称" prop="name">
            <Input v-model.trim="reProjectForm.name" placeholder="名称"></Input>
          </FormItem>
          <!-- <FormItem label="训练ID" prop="trainId">
                        <Input v-model.trim="reProjectForm.trainId" placeholder="训练ID"></Input>
                    </FormItem> -->
          <FormItem label="描述" prop="description">
            <Input
              v-model.trim="reProjectForm.description"
              type="textarea"
              :maxlength="200"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="描述"
            ></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button @click="editProjectModal = false">取消</Button>
        <Button type="primary" @click="saveReProject('reProjectForm')" :loading="saveProjectLoading"
          >确定</Button
        >
      </div>
    </Modal>
    <!--工程分享-->
    <Modal
      v-model="shareProjectModal"
      width="1000"
      :mask-closable="false"
      :footer-hide="true"
      title="分享工程"
    >
      <Tabs :value="shareModelTabs" @on-click="changeShareTab">
        <TabPane label="管理" name="name1">
          <div style="height: 450px;overflow: auto">
            <Table
              border
              :columns="projectSharersCol"
              :data="projectSharersList"
              @on-selection-change="selectDelProjectSharers"
            ></Table>
          </div>
          <Divider />
          <div class="share-foot-btn">
            <Poptip
              transfer
              confirm
              style="float: right"
              title="确定要删除这个单位人吗？"
              @on-ok="delProjectSharersBtn"
            >
              <Button
                style="float: right;margin-left: 10px"
                type="error"
                :loading="delProjectSharersLoading"
                :disabled="isCanDisabled"
                >删除</Button
              >
            </Poptip>
            <Button style="float: right" @click="canleShareProModal">取消</Button>
          </div>
        </TabPane>
        <TabPane label="单位内分享" name="name2">
          <div>
            <div style="margin-bottom: 15px">
              <Input
                v-model.trim="searchComMemInput"
                placeholder="用户名"
                style="width: 200px"
                clearable
                @on-change="searchComMem"
              />
            </div>
            <Table
              border
              :columns="groupMemCol"
              :data="groupMemRow(groupMemList)"
              height="430"
              @on-selection-change="selectionMemForGroup"
              :loading="shareProjectListLoading"
            ></Table>
            <div style="display: flex;justify-content: space-between;margin-top: 15px">
              <div>
                <Button
                  style="margin-right: 15px"
                  type="primary"
                  @click="shareProjectBtn"
                  :loading="shareBtnLoading"
                  :disabled="isCanDisabled"
                  >确定</Button
                >
                <Button @click="canleShareProModal">取消</Button>
              </div>
              <Page
                :total="groupTotal"
                :page-size="groupPageSize"
                :current="groupMemPage"
                show-total
                show-elevator
                placement="top"
                @on-change="groupOnChange"
              />
            </div>
          </div>
        </TabPane>
      </Tabs>
    </Modal>
    <!--管理工程可用域-->
    <Modal
      v-model="projectZoneModal"
      width="600"
      @on-visible-change="zoneModalStatus"
      :mask-closable="false"
      title="可用域管理"
    >
      <Tabs :value="saveTabName" @on-click="clickProTabs">
        <TabPane label="工程可用域" name="name1">
          <Table border :columns="projectZoneCol" :data="projectZoneList"></Table>
        </TabPane>
        <TabPane label="用户可用域" name="name2">
          <Table
            border
            :columns="userZonesCol"
            :data="userZonesRow(userZonesList)"
            @on-selection-change="selectUserZones"
          ></Table>
        </TabPane>
      </Tabs>
      <div slot="footer">
        <Button @click="canleReZoneProModal">取消</Button>
        <Button
          type="primary"
          @click="saveZoneModalBtn"
          :loading="reProjectZonesLoading"
          :disabled="isCanZoneDisabled"
          >确定</Button
        >
      </div>
    </Modal>
    <!--批量删除工程-->
    <Modal v-model="delProModel" width="600" :mask-closable="false" title="批量删除工程">
      <div>
        <div class="uploadTypeWrap">
          不支持删除的工程的状态有：待部署、删除中、部署中、待删除、清空部署中、部署校验中、工程导入中
        </div>
        <Tag color="error" type="border" v-for="item in this.selectAllProjects" :key="item.id">{{
          item.name
        }}</Tag>
      </div>
      <div slot="footer">
        <Button @click="delProModel = false">取消</Button>
        <Poptip
          transfer
          confirm
          style="float: right"
          title="确定要删除以上工程吗？"
          @on-ok="delAllPro"
        >
          <Button style="float: right;margin-left: 10px" type="error">删除</Button>
        </Poptip>
      </div>
    </Modal>
  </MenuPage>
</template>
<script>
import $ from 'jquery';
import cookieUse from '@/libs/cookie.js';
import encryption from '@/libs/encryption.js';
import {
  modifyProject,
  delProject,
  queryProjectstatus,
  clearDeloyPro,
  queryShareOfPro,
  queryCompanyMembers,
  shareDesign,
  zoneOfProject,
  zoneOfuser,
  modifyZone,
  downLoadExcel
} from '@/api/homer.js';
import creatPro from '@/components/creatPage/creatProject';
import { getSceneList, modifyScene,modifyScenePrjname} from '@/api/drill_compete';
import { getDictInfoByName } from '@/api/dict';
import { validateName ,validateName1} from '@/libs/reg.js'
import pageTitle from '@/mixin/pageTitle';
import {projectCol} from './projectCol'
export default {
  components: { creatPro }, //boards
  mixins:[pageTitle,projectCol],
  data() {
    return {
      showVisualization: false, // 是否展示大屏态势按钮，为山东比赛特意添加
      // distributedRange:false,
      // 人员信息
      USER_ID: '',
      isRootDesigner: false,
      getToken: '',
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      // 显示省略图
      showDefImg1: false,
      showProjectList: false,
      // 工程列表
      proPage: 1,
      proPageSize: 10,
      searchProjectname: '',
      projectStatus: '',
      proDate: '',
      proTotal: 0,
      projectList: [],
      projectDelayStatus: 'allProject',
      myAndAllProject: 'allProject',
      myProject: false,
      shareMe: false,
      enableAll: '',
      isCreator: '',
      proStartTime: '',
      proEndTime: '',
      queryProjectID: '',
      // 保存中间状态的工程
      saveProjectStatusIdArr: [],
      // 创建工程
      createProModal: false,
      verticalRadio: 'JSON',
      // 修改 删除工程
      editProjectModal: false,
      reProjectForm: {
        name: '',
        description: '',
        trainId: ''
      },
      reProjectRuleValidate: {
        name: [
          { required: true, max: 64, message: '工程名称长度为1—64个字符', trigger: 'change' },
          { validator: validateName1, trigger: 'change' }
        ],
        description: [{ max: 200, message: '描述文字不能超过200个字符', trigger: 'change' }]
      },
      editProjectId: '',
      saveProjectLoading: false,
      editProCreatorId: '',
      // 批量删除功能
      selectAllProject: false,
      selectAllProjects: [],
      delProModel: false,
      delType: false,
      // 分享工程
      shareProId: '',
      projectCreatorId: '',
      shareProjectModal: false,
      groupMemPage: 1, // 单位内分享列表当前页
      groupTotal: 0,
      groupPageSize: 10,
      groupMemList: [],
      groupMemCol: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名',
          key: 'userName',
          align: 'center'
        },
        {
          title: '昵称',
          key: 'nickname',
          align: 'center'
        },
        {
          title: '类型',
          key: 'type',
          align: 'center',
          render: (h, params) => {
            if (params.row.type === 'designer') {
              return h('span', '设计师')
            } else if (params.row.type === 'manager') {
              return h('span', '管理人员')
            } else if (params.row.type === 'experimenter') {
              return h('span', '课件人员')
            }
          }
        },
        {
          title: '角色',
          key: 'role',
          align: 'center',
          render: (h, params) => {
            if (params.row.type === 'designer') {
              if (params.row.role === 'leader') {
                return h('span', '单位管理员')
              } else if (params.row.role === 'member') {
                return h('span', '单位设计师')
              } else if (params.row.role === 'evaluator') {
                return h('span', '评估人员')
              } else if (params.row.role === 'referee') {
                return h('span', '裁判人员')
              } else if (params.row.role === 'exp-designer') {
                return h('span', '课件设计师')
              } else {
                return h('span', '暂无角色')
              }
            }else{
              return h('span', '课件人员')
            }
          }
        },
        {
          title: '是否在线',
          key: 'online',
          align: 'left',
          width: 90,
          render: (h, params) => {
            let color = '',text = '';
            if (!params.row.online || params.row.online === 'false') {
              color = 'var(--status-no)';
              text ='否'
            } else {
              color = 'var(--status-yes)';
              text ='是'
            }
            return h(
              'Tag',
              {
                props: {
                  color: color,
                  type: 'border'
                }
              },
              text
            );
          }
        },
        {
          title: '描述',
          key: 'description',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'created',
          align: 'center'
        }
      ],
      groupMemRow(val) {
        let data = [];
        for (let i = 0; i < val.length; i++) {
          let _disabled = false;
          if (this.USER_ID === val[i]['id'] && this.projectCreatorId === this.USER_ID) {
            _disabled = true;
          } else {
            _disabled = false;
          }
          data.push({
            userName: val[i]['username'],
            nickname: val[i]['nickname'],
            type: val[i]['type'],
            id: val[i]['id'],
            email: val[i]['email'],
            role: val[i]['role'],
            online: val[i]['online'],
            created: val[i]['created'],
            description: val[i]['description'],
            _disabled: _disabled
          });
        }
        return data;
      },
      getMemIdArr: [],
      searchComMemInput: '',
      shareBtnLoading: false,
      isDisableBtn: false,
      shareProjectListLoading: false,
      // 工程分享人
      projectSharersList: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名',
          key: 'creatorName',
          align: 'center'
        },
        {
          title: '用户ID',
          key: 'creator',
          align: 'center'
        }
      ],
      isCanDisabled: true,
      delProjectSharersArr: [],
      delProjectSharersLoading: false,
      kickOutProjectLoading: false,
      shareModelTabs: 'name1',
      // 工程可用域
      projectZoneModal: false,
      zoneObj: {},
      saveTabName: 'name1',
      projectZoneId: '',
      projectZoneCreatorId: '',
      projectZoneList: [],
      projectZoneCol: [
        {
          title: '默认可用域',
          key: 'enableDefault',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Radio', {
                props: {
                  value: params.row.enableDefault
                },
                on: {
                  'on-change': () => {
                    this.changeRadio(params);
                  }
                }
              })
            ]);
          }
        },
        {
          title: '可用域名称',
          key: 'zone',
          align: 'center'
        },
        {
          title: '类型',
          key: 'vzType',
          align: 'center'
        },
        {
          title: '工程ID',
          key: 'projectId',
          align: 'center'
        }
      ],
      projectZoneRow(val) {
        let data = [];
        for (let i = 0; i < val.length; i++) {
          data.push({
            type: val[i]['type'],
            zone: val[i]['zone'],
            enableDefault: val[i]['enableDefault'],
            projectId: val[i]['projectId'],
            id: val[i]['id']
          });
        }
        return data;
      },
      selectProZoneArr: [],
      reProjectZonesLoading: false,
      isCanZoneDisabled: false,
      isCanReUserZone: false,
      saveProZonesName: [],
      defultProjectZoneId: '',
      // 用户可用域
      userZonesList: [],
      userZonesCol: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '可用域名称',
          key: 'zone',
          align: 'center'
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        }
      ],
      userZonesRow(val) {
        let data = [];
        for (let i = 0; i < val.length; i++) {
          if (this.selectProZoneArr.find(item => item.zone === val[i]['zone'])) {
            data.push({
              isDefault: val[i]['isDefault'],
              zone: val[i]['zone'],
              companyName: val[i]['companyName'],
              type: val[i]['type'],
              companyId: val[i]['companyId'],
              _checked: true
            });
          } else {
            data.push({
              isDefault: val[i]['isDefault'],
              zone: val[i]['zone'],
              companyName: val[i]['companyName'],
              type: val[i]['type'],
              companyId: val[i]['companyId'],
              _checked: false
            });
          }
        }
        return data;
      },
      // 导入工程
      upLoadUrl: `${this.baseURL}/topo-edit/projects/json/async/file?mode=${this.mode}`,
      upLoadUrl2: `${this.baseURL}/topo-edit/excel/define/topo/generate?mode=${this.mode}`,
      setUpLoadHead: { Authorization: this.getToken },
      uploadFile: null,
      importProjectLoading: false,
      mode: 'complete',
      supportTopoDis: false,
      supportExcelDis: false,
      // 按钮
      shareIcon: require('../../assets/project/shares-h.png'),
      zonesIcon: require('../../assets/project/zones-h.png'),
      tabName: 'name1'
    };
  },
  created() {},
  computed: {
    projectSharersCol() {
      let _this = this;
      let columns = [];
      if (this.projectCreatorId == this.USER_ID || this.isRootDesigner) {
        columns.push({
          type: 'selection',
          width: 60,
          align: 'center'
        });
        columns.push({
          title: '名称',
          key: 'creatorName',
          align: 'center'
        });
        columns.push({
          title: 'ID',
          key: 'creator',
          align: 'center'
        });
      } else {
        columns.push({
          type: 'index',
          width: 60,
          align: 'center'
        });
        columns.push({
          title: '名称',
          key: 'creatorName',
          align: 'center'
        });
        columns.push({
          title: 'ID',
          key: 'creator',
          align: 'center'
        });
        columns.push({
          title: 'Action',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    transfer: true,
                    title: '确定要退出该工程分享吗？'
                  },
                  on: {
                    'on-ok': () => {
                      this.signOutSharePro(params);
                    },
                    'on-cancel': () => {
                      // console.log('you clicked cancel.');
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'error',
                        size: 'small',
                        disabled: params.row.creator === this.USER_ID ? false : true
                      }
                    },
                    '退出'
                  )
                ]
              )
            ]);
          }
        });
      }
      return columns;
    },
    distributedRange() {
      return this.$store.state.user.distributedRange;
    }
  },
  mounted() {
    this.getToken = cookieUse.getCookie('desig-token');
    // 获取用户id
    let November = sessionStorage.getItem('November');
    if (November) {
      this.init(November);
    } else {
      setTimeout(() => {
        // 如果不使用定时器或者关闭当前页，再输入url 会低概率出现第一次无法获取到November的问题
        let NovemberT = sessionStorage.getItem('November');
        this.init(NovemberT);
      }, 3000);
    }
  },
  beforeDestroy() {
    this.timerProjectList && clearInterval(this.timerProjectList);
    clearInterval(this.proSetInterval);
    window.removeEventListener('wheel', this.handleMouseWheel, {
      passive: false
    });
  },
  methods: {
    init(val) {
      let November = JSON.parse(encryption.SelfUseDecrypt(val));
      this.USER_ID = November.userId;
      this.isRootDesigner = November.isRootDesigner;
      this.showProjectSelect = November.isRootDesigner;
      // this.distributedRange = this.$store.state.user.distributedRange//获取是否支持分布式
      // this.setStyle();
      // window.onresize = () => {
      //   this.setStyle();
      // };
      this.getProjectList();
      this.getDictInfoByName();
      window.addEventListener('wheel', this.handleMouseWheel, {
        passive: false
      });
      this.timerProjectList && clearInterval(this.timerProjectList);
      this.timerProjectList = setInterval(() => {
        this.getProjectList();
      }, 5 * 1000);
    },
    handleMouseWheel(e) {
      if (!window.scrollY) {
        // 禁止页面滚动
        // e.preventDefault()
        if (e.wheelDelta) {
          // 判断浏览器IE，谷歌滑轮事件
          // this.$refs.deletePop.forEach((item) => {
          //   item.visible = false;
          // });
        } else if (e.detail) {
          // Firefox滑轮事件
          // this.$refs.deletePop.forEach((item) => {
          //   item.visible = false;
          // });
        }
      }
    },
    //是否可以聊天
    getDictInfoByName() {
      getDictInfoByName({
        name: 'sdBigscreenConfig'
      }).then((data) => {
        if (data.code == 1) {
          this.showVisualization = data.attribute.data.value && data.attribute.data.value === '1';
        }
      });
    },
    // 设置高度
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
    },
    // 工程列表
    getProjectList() {
      // this.timerProjectList && clearInterval(this.timerProjectList)
      this.proSetInterval && clearInterval(this.proSetInterval);
      this.saveProjectStatusIdArr = [];
      // 是否是单位管理员
      let enableAll = '';
      // 是否是自己创建
      let creator = '';
      if (this.showProjectSelect) {
        enableAll = `&enableAll=true`;
      } else {
        enableAll = `&enableAll=${this.enableAll}`;
      }
      if (this.isCreator === '') {
      } else {
        creator = `&creator=${this.isCreator}`;
      }
      let id = '';
      if (this.queryProjectID != '') {
        id = `&id=${this.queryProjectID}`;
      }
      if (this.projectDelayStatus === 'allProject') {
        this.projectStatus = '';
      } else {
        this.projectStatus = this.projectDelayStatus;
      }
      if (this.projectStatus == undefined) {
        this.projectStatus = '';
      }
      this.axios
        .get(
          `${this.baseURL}/topo-edit/projects?pageIndex=${this.proPage}&pageSize=${this.proPageSize}&name=${this.searchProjectname}${id}&status=${this.projectStatus}${creator}&startTime=${this.proStartTime}&endTime=${this.proEndTime}${enableAll}`
        )
        .then((res) => {
          if (res.data.code === 1) {
            let attribute = res.data.data;
            // this.projectList = attribute.dataList
            // 保存 工程id数组
            let dataList = attribute.items;
            if (dataList.length == 0 && this.proPage > 1) {
              this.proPage = Math.ceil((this.proTotal / this.proPageSize));
              this.getProjectList();
              return;
            }
            this.proTotal = attribute.total;
            for (let i = 0; i < dataList.length; i++) {
              if (
                dataList[i].statusCHName == '删除中' ||
                dataList[i].statusCHName == '部署中' ||
                dataList[i].statusCHName == '待删除' ||
                dataList[i].statusCHName == '清空部署中' ||
                dataList[i].statusCHName == '部署校验中' ||
                dataList[i].statusCHName == '工程导入中'
              ) {
                this.saveProjectStatusIdArr.push(dataList[i].id);
              }
            }
            this.projectList = dataList;
            this.projectList.forEach((user) => {
              if (this.selectAllProjects.map((user) => user.id).includes(user.id)) {
                this.$set(user, '_checked', true);
              } else {
                this.$set(user, '_checked', false);
              }
            });
            this.isCheckAll();
            if (this.saveProjectStatusIdArr.length > 0) {
              // 轮询中间状态的工程
              this.initQueryProState();
            }
            this.showProjectList = this.projectList.length > 0;
            this.showDefImg1 = false;
          } else if (res.data.code === -2) {
            this.projectList = [];
            this.proTotal = 0;
            this.showProjectList = false;
            this.$Message.warning(res.data.message);
            this.showDefImg1 = true;
          } else {
            // this.$Message.info(res.data.message)
            this.showProjectList = false;
            this.$Message.warning(res.data.message);
            this.showDefImg1 = true;
          }
        })
        .catch((err) => {
          this.$Message.error('获取工程列表异常');
          this.showProjectList = false;
          this.showDefImg1 = true;
        });
    },
    // 设置工程状态颜色
    setColor(status) {
      let color = 'grey';
      switch (status) {
        case 0: // 未部署
          color = '#888';
          return color;
          break;
        case 3: // 部署成功
          color = '#06b649';
          return color;
          break;
        case 4: // 删除中
          color = '#ff4242';
          return color;
          break;
        case 6: // 部署失败
          color = '#ff4242';
          return color;
          break;
        case 8: // 删除失败
          color = '#fa9901';
          return color;
          break;
        case 9: // 部署中
          color = '#06b649';
          return color;
          break;
        case 12: // 待删除
          color = '#888';
          return color;
          break;
        case 13: // 清空部署中
          color = '#ff8244';
          return color;
          break;
        case 14: // 清空部署失败
          color = '#ff8244';
          return color;
          break;
        case 16: // 工程导入中
          color = '#088cf0';
          return color;
          break;
        case 17: // 工程导入失败
          color = '#cb0236';
          return color;
          break;
        case 15: // 部署校验中
          color = '#ff8244';
          return color;
          break;
      }
    },
    // 轮询中间状态工程
    initQueryProState() {
      this.proSetInterval = setInterval(() => {
        if (this.saveProjectStatusIdArr.length === 0) {
          clearInterval(this.proSetInterval);
          return false;
        }
        queryProjectstatus(this.saveProjectStatusIdArr[0])
          .then((res) => {
            if (res.data.code === 1) {
              let projectData = res.data.attribute.project;
              if (
                projectData.statusCHName != '删除中' &&
                projectData.statusCHName != '部署中' &&
                projectData.statusCHName != '待删除' &&
                projectData.statusCHName != '清空部署中' &&
                projectData.statusCHName != '部署校验中' &&
                projectData.statusCHName != '工程导入中'
              ) {
                this.$Message.info({
                  content: '操作成功',
                  duration: 3
                });
                this.saveProjectStatusIdArr.splice(0, 1);
                this.getProjectList();
              }
            } else if (res.data.code === -2) {
              this.saveProjectStatusIdArr.splice(0, 1);
              this.getProjectList();
            } else {
              this.$Message.info({
                content: res.data.message,
                duration: 3
              });
              clearInterval(this.proSetInterval);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }, 3000);
    },
    // 过滤
    proOnChange(val) {
      this.proPage = val;
      //this.handleCheckAllPro(false)
      this.getProjectList();
    },
    queryCreateOrShare(val) {
      if (val == this.myAndAllProject) {
        this.myAndAllProject = 'allProject';
        if (val === 'myProject') {
          this.myProject = false;
        } else {
          this.shareMe = false;
        }
      } else {
        this.myAndAllProject = val;
        if (val === 'myProject') {
          this.myProject = true;
          this.shareMe = false;
        } else {
          this.myProject = false;
          this.shareMe = true;
        }
      }
      this.changePro();
    },
    changePro() {
      if (this.projectDelayStatus === 'allProject') {
        this.projectStatus = '';
      } else {
        this.projectStatus = this.projectDelayStatus;
      }

      this.proPage = 1;
      if (this.myAndAllProject === 'allProject') {
        if (this.isRootDesigner) {
          this.showProjectSelect = true;
        } else {
          this.showProjectSelect = false;
        }
        this.isCreator = '';
      } else if (this.myAndAllProject === 'myProject') {
        this.isCreator = this.USER_ID;
      } else if (this.myAndAllProject === 'shareMe') {
        this.isCreator = '-1';
      }
      this.getProjectList();
    },
    searchProName(val) {
      this.proPage = 1;
      this.searchProjectname = this.searchProjectname;
      this.getProjectList();
    },
    // 刷新工程
    refreshProject() {
      this.proPage = 1;
      this.projectDelayStatus = 'allProject';
      this.myAndAllProject = 'allProject';
      this.proStartTime = '';
      this.proEndTime = '';
      this.proDate = '';
      this.searchProjectname = '';
      this.isCreator = '';
      this.projectStatus = '';
      this.queryProjectID = '';
      this.queryTaskId = '';
      this.myProject = false;
      this.shareMe = false;
      this.selectAllProjects = [];
      //this.handleCheckAllPro(false)
      this.getProjectList();
    },
    // 计算index
    handleProIndex(key) {
      return (this.proPage - 1) * this.proPageSize + key + 1;
    },
    // 跳转
    goTopo(row) {
      let stateText = row.statusCHName;
      if (stateText === '工程导入中') {
        this.$Message.info({
          content: '该工程正在导入中...',
          duration: 3
        });
        return false;
      } else if (stateText === '删除中') {
        this.$Message.info({
          content: '该工程正在删除中...',
          duration: 3
        });
        return false;
      } else if (stateText === '工程导入失败') {
        this.$Message.info({
          content: '该工程导入失败！',
          duration: 3
        });
        return false;
      }
      window.openTrain(`/jjzzTopo/index.html#/ProjectViews?projectId=${row.id}`);
    },
    // 新建工程
    creatProBtn() {
      this.uploadFile = null;
      this.createProModal = true;
    },
    goVisualization() {
      window.openTrain(`/dualMeet2/home.html`);
    },
    conModalChange() {
      console.log('创建按成功啊啊啊啊a-----')
      this.createProModal = false;
      this.refreshProject();
    },
    // 修改
    editProject(item) {
      this.editProjectModal = true;
      this.editProjectId = item.id;
      this.reProjectForm.name = item.name;
      this.reProjectForm.description = item.description;
      this.reProjectForm.trainId = item.trainId ? item.trainId + '' : '';
    },
    saveReProject(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.reProjectForm.id = this.editProjectId;
          this.saveProjectLoading = true;
          modifyProject(this.reProjectForm)
            .then((res) => {
              this.saveProjectLoading = false;
              if (res.data.code === 1) {
                this.editProjectId = '';
                this.editProjectModal = false;
                this.getProjectList();
                // this.$emit('setSceneUpdate',false)
                // 需要同步修改场景关联的工程名称
                getSceneList({
                  pageIndex: 1,
                  pageSize: 2147483646,
                  projectId: res.data.attribute.projectIn.id
                })
                  .then(({ code, message, data }) => {
                    if (code === 1) {
                      let items = data.items || [];
                      if (items.length) {
                        Promise.all(
                          items.map((item) => {
                            return modifyScenePrjname(item.id, { // modifyScene  问题单：21591
                              id: item.id,
                              projectName: res.data.attribute.projectIn.name
                            });
                          })
                        ).then((resList) => {
                          if (resList.some((res) => res.code !== 1)) {
                            this.$Message.warning('工程修改成功，级联修改竞赛、演练场景失败');
                          } else {
                            // 级联修改也成功了
                            this.$Message.info('工程修改成功');
                          }
                        });
                      } else {
                        // 无需级联修改，提示修改成功
                        this.$Message.info('工程修改成功');
                      }
                    } else {
                      this.$Message.warning(`工程修改成功，${message}，级联修改竞赛、演练场景失败`);
                    }
                  })
                  .catch(() => {
                    this.$Message.error(`工程修改成功，级联修改竞赛、演练场景异常`);
                  });
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 3
                });
              }
            })
            .catch((err) => {
              console.log(err);
              this.saveProjectLoading = false;
              this.$Message.error('服务器连接失败！');
            });
        } else {
          this.$Message.error('请填写符合验证规则的内容');
        }
      });
    },
    // 删除工程
    delProject(item) {
      delProject(item.id)
        .then((res) => {
          if ([1, 3].includes(res.data.code)) {
            if (!this.delProModel) {
              this.$Message.info({
                content: '操作成功',
                duration: 3
              });
            }
            this.selectAllProjects = [];
            this.getProjectList();
            // this.$emit('setSceneUpdate',false)
          } else {
            this.$Message.warning({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$Message.error('服务器连接失败！');
        });
    },
    handleSelectionChange(data){
      this.selectAllProjects = data;
    },
    // 选中当前页所有工程
    handleCheckAllPro(e) {
      this.selectAllProject = e;
      this.projectList.forEach((item) => {
        this.checkSinglePro(e, item);
      });
    },
    checkSinglePro(e, item) {
      // 以下状态不可选择：待部署2 删除中4 部署中9 待删除12 清空部署中13 部署校验中15 工程导入中16
      if (
        item.status == 2 ||
        item.status == 4 ||
        item.status == 9 ||
        item.status == 12 ||
        item.status == 13 ||
        item.status == 15 ||
        item.status == 16
      ) {
        return false;
      }
      if (e && !this.selectAllProjects.map((item) => item.id).includes(item.id)) {
        this.selectAllProjects.push(item);
      } else if (!e && this.selectAllProjects.map((item) => item.id).includes(item.id)) {
        let index = this.selectAllProjects.findIndex((pro) => pro.id == item.id);
        this.selectAllProjects.splice(index, 1);
      }
      this.$set(item, '_checked', e);
      this.isCheckAll();
    },
    isCheckAll() {
      //是否checkAll
      let enableCheckPro = this.projectList
        .filter((item) => {
          return !(
            item.status == 2 ||
            item.status == 4 ||
            item.status == 9 ||
            item.status == 12 ||
            item.status == 13 ||
            item.status == 15 ||
            item.status == 16
          );
        })
        .map((item) => item.id);
      let checkPro = this.projectList.filter((item) => item._checked).map((item) => item.id);
      this.selectAllProject =
        enableCheckPro.length !== 0 &&
        enableCheckPro.length === checkPro.length &&
        enableCheckPro.every((a) => checkPro.some((b) => a === b)) &&
        checkPro.every((_b) => enableCheckPro.some((_a) => _a === _b));
    },
    delAllProModelBtn() {
      if (this.selectAllProjects.length === 0) {
        this.$Message.info({
          content: '请选择要删除的工程',
          duration: 3
        });
        return false;
      }
      this.delProModel = true;
    },
    delAllPro() {
      this.$Message.info({
        content: '删除中',
        duration: 5
      });
      for (let i = 0; i < this.selectAllProjects.length; i++) {
        this.delProject(this.selectAllProjects[i]);
      }
      setTimeout(() => {
        this.delProModel = false;
        this.selectAllProjects = [];
      }, 2000);
    },
    // 清空部署
    clearDpeloyBtn(item) {
      if (
        item.statusENName === 'deploySuccess' ||
        item.statusENName === 'deployFailure' ||
        item.statusENName === 'cleanError' ||
        item.statusENName === 'deleteError'
      ) {
        this.clearDpeloy(item.id);
      } else {
        this.$Message.info({
          content: '当前工程不能清空部署！',
          duration: 3
        });
      }
    },
    clearDpeloy(id) {
      let params = {
        projectId: id
      };
      clearDeloyPro(id, params)
        .then((res) => {
          if (res.data.code === 1) {
            this.$Message.success({
              content: '清空部署成功',
              duration: 3
            });
            this.getProjectList();
          } else if (res.data.code === 3) {
            this.$Message.warning({
              content: res.data.message,
              duration: 3
            });
            this.getProjectList();
          } else {
            this.$Message.warning({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$Message.error('服务器连接失败！');
        });
    },
    setCanClick(item) {
      let statusFlag = false;
      let text = item.statusCHName;
      if (
        text === '部署成功' ||
        text === '部署失败' ||
        text === '清空部署失败' ||
        text === '删除失败'
      ) {
        statusFlag = true;
      }
      if (statusFlag && (item.creator === this.USER_ID || this.isRootDesigner)) {
      } else {
        return { 'pointer-events': 'none' };
      }
    },
    setClearImgSrc(item) {
      let statusFlag = false;
      let text = item.statusCHName;
      if (
        text === '部署成功' ||
        text === '部署失败' ||
        text === '清空部署失败' ||
        text === '删除失败'
      ) {
        statusFlag = true;
      }
      if (statusFlag && (item.creator === this.USER_ID || this.isRootDesigner)) {
        return require('../../assets/project/clears-h.png');
      } else {
        return require('../../assets/project/clears.png');
      }
    },
    // 分享工程   管理分享
    shareProject(value, index) {
      // 联盟内分享用到的工程名
      this.shareModelTabs = 'name1';
      this.showIpItem = false;
      this.shareProId = value.id;
      this.projectCreatorId = value.creator;
      this.shareProjectModal = true;
      if (this.projectCreatorId === this.USER_ID || this.isRootDesigner) {
        this.isCanDisabled = false;
      } else {
        this.isCanDisabled = true;
        this.$Message.info({
          content: '只有工程创建者或者单位管理员才能操作！',
          duration: 2
        });
      }
      this.projectSharersData();
      this.groupMemPage = 1;
      this.searchComMemInput = '';
      this.groupMemberData();
    },
    projectSharersData() {
      this.projectSharersList = [];
      queryShareOfPro(this.shareProId)
        .then((res) => {
          if (res.data.code === 1) {
            this.projectSharersList = res.data.attribute.result;
          }
        })
        .catch((err) => {
          console.log(err);
          this.$Message.error('服务器连接失败！');
        });
    },
    selectDelProjectSharers(val) {
      this.delProjectSharersArr = [];
      for (let i = 0; i < val.length; i++) {
        this.delProjectSharersArr.push(val[i]['creator']);
      }
    },
    delProjectSharersBtn() {
      if (this.delProjectSharersArr.length > 0) {
        this.delProjectSharersLoading = true;
        $.ajax({
          url: `${this.baseURL}/topo-edit/project/${this.shareProId}/kickOut`,
          type: 'delete',
          headers: { Authorization: this.getToken },
          contentType: 'application/json',
          data: JSON.stringify(this.delProjectSharersArr),
          success: (res) => {
            this.delProjectSharersLoading = false;
            if (res.code === 1) {
              this.$Message.success({
                content: '删除成功',
                duration: 3
              });
              this.projectSharersData();
              this.delProjectSharersArr = [];
              // 如果是单位管理员 则调用工程列表
              if (this.isRootDesigner) {
                this.getProjectList();
              }
            } else {
              this.$Message.error({
                content: res.message,
                duration: 3
              });
            }
          },
          error: (err) => {
            this.delProjectSharersLoading = false;
            console.log(err);
            this.$Message.error('服务器连接失败！');
          }
        });
      } else {
        this.$Message.info({
          content: '请选择删除的对象！',
          duration: 3
        });
      }
    },
    changeShareTab(name) {
      this.shareModelTabs = name;
      // this.alliFormValidate.deviceid = ''
      this.deviceArr = [];
      if (name === 'name1') {
        this.projectSharersData();
      }
    },
    signOutSharePro(params) {
      let delArr = [];
      delArr.push(params.row.creator);
      this.kickOutProjectLoading = true;
      $.ajax({
        url: `${this.baseURL}/topo-edit/project/${this.shareProId}/kickOut`,
        type: 'delete',
        headers: { Authorization: this.getToken },
        contentType: 'application/json',
        data: JSON.stringify(delArr),
        success: (res) => {
          if (res.code === 1) {
            this.$Message.success({
              content: '退出成功',
              duration: 3
            });
            this.shareProjectModal = false;
            this.getProjectList();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
          this.kickOutProjectLoading = false;
        },
        error: (err) => {
          this.kickOutProjectLoading = false;
          this.$Message.error('服务器连接失败！');
        }
      });
    },
    // 分享
    groupMemberData() {
      this.shareProjectListLoading = true;
      let params = {
        pageIndex: this.groupMemPage,
        pageSize: this.groupPageSize,
        type: 'designer',
        order: 'desc',
        sortBy: 'created'
      };
      if (this.searchComMemInput != '') {
        params.username = this.searchComMemInput;
      }
      queryCompanyMembers(params)
        .then((res) => {
          if (res.data.code == 1) {
            let getData = res.data.data;
            this.groupTotal = getData.total;
            this.groupMemList = getData.items;
          }
          this.shareProjectListLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.shareProjectListLoading = false;
        });
    },
    groupOnChange(val) {
      this.groupMemPage = val;
      this.groupMemberData();
    },
    searchComMem(val) {
      this.groupMemPage = 1;
      this.searchComMemInput = this.searchComMemInput;
      this.groupMemberData();
    },
    selectionMemForGroup(val) {
      this.getMemIdArr = [];
      for (let i = 0; i < val.length; i++) {
        this.getMemIdArr.push(val[i]['id']);
      }
    },
    shareProjectBtn() {
      if (this.getMemIdArr.length > 0) {
        this.shareBtnLoading = true;
        shareDesign(this.shareProId, this.getMemIdArr)
          .then((res) => {
            if (res.data.code === 1) {
              this.$Message.success({
                content: '分享成功！',
                duration: 3
              });
              this.getMemIdArr = [];
            } else {
              this.$Message.warning({
                content: res.data.message,
                duration: 3
              });
            }
            this.shareBtnLoading = false;
          })
          .catch((err) => {
            this.shareBtnLoading = false;
            this.$Message.error('服务器连接失败！');
          });
      } else {
        this.$Message.info({
          content: '请选择分享对象！',
          duration: 3
        });
      }
    },
    canleShareProModal() {
      this.shareProjectModal = false;
      this.shareProId = '';
      this.projectCreatorId = '';
    },
    // 可用域
    clickZoneBtn(item) {
      this.projectZoneModal = true;
      this.zoneObj = item;
      this.queryProjectZone(this.zoneObj);
    },
    clickProTabs(val) {
      this.saveTabName = val;
      if (val === 'name1') {
        this.queryProjectZone(this.zoneObj);
      } else if (val === 'name2') {
        this.showUserZonesBtn();
      }
    },
    zoneModalStatus(val) {
      if (!val) {
        this.zoneObj = {};
        this.reProjectZonesLoading = false;
      }
    },
    saveZoneModalBtn() {
      this.reProjectZonesLoading = true;
      if (this.saveTabName === 'name1') {
        this.reProjectZonesBtn();
      } else if (this.saveTabName === 'name2') {
        this.userZonesBtn();
      }
    },
    // 工程可用域列表
    queryProjectZone(item) {
      this.projectZoneId = item.id;
      this.projectZoneCreatorId = item.creator;
      this.projectZoneList = [];
      this.saveProZonesName = [];
      // 当前域
      this.selectProZoneArr = [];
      // 是否禁止修改按钮
      if (this.USER_ID === this.projectZoneCreatorId || this.isRootDesigner) {
        this.isCanZoneDisabled = false;
        this.isCanReUserZone = false;
      } else {
        this.isCanZoneDisabled = true;
        this.isCanReUserZone = true;
        this.$Message.info({
          content: '只有工程创建者或者单位管理员才能操作！',
          duration: 2
        });
      }
      // 工程可用域
      zoneOfProject(this.projectZoneId)
        .then((res) => {
          if (res.data.code === 1) {
            this.projectZoneList = res.data.attribute.result;
            // 保存一个默认可用域id
            this.defultProjectZoneId = res.data.attribute.result[0].id;
            for (let i = 0; i < this.projectZoneList.length; i++) {
              this.saveProZonesName.push(this.projectZoneList[i]['zone']);
              let objData = {
                enableDefault: this.projectZoneList[i]['enableDefault'],
                type: this.projectZoneList[i]['vzType'],
                zone: this.projectZoneList[i]['zone']
              };
              this.selectProZoneArr.push(objData);
            }
          } else {
            this.projectZoneList = [];
            this.defultProjectZoneId = '';
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 保存按钮
    reProjectZonesBtn() {
      $.ajax({
        url: `${this.baseURL}/topo-edit/zones/project/${this.projectZoneId}/zones/${this.defultProjectZoneId}`,
        type: 'put',
        contentType: 'application/json',
        headers: { Authorization: this.getToken },
        data: {},
        success: (res) => {
          if (res.code === 1) {
            this.$Message.success('工程默认域设置成功！');
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
          this.reProjectZonesLoading = false;
        },
        error: (err) => {
          console.log(err);
          this.reProjectZonesLoading = false;
          this.$Message.error('服务器连接失败！');
        }
      });
    },
    canleReZoneProModal() {
      this.projectZoneModal = false;
    },
    changeRadio(params) {
      console.log(params);
      this.defultProjectZoneId = '';
      let type = params.row.vzType;
      let id = params.row.id;
      for (let i = 0; i < this.projectZoneList.length; i++) {
        if (type === this.projectZoneList[i].vzType && id != this.projectZoneList[i].id) {
          this.projectZoneList[i].enableDefault = false;
        } else if (id === this.projectZoneList[i].id) {
          this.projectZoneList[i].enableDefault = true;
          this.defultProjectZoneId = id;
        }
      }
    },
    // 用户可用域
    showUserZonesBtn() {
      this.userZonesList = [];
      zoneOfuser()
        .then((res) => {
          if (res.data.code === 1) {
            this.userZonesList = res.data.data;
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    selectUserZones(val) {
      let _this = this;
      this.selectProZoneArr = [];
      for (let i = 0; i < val.length; i++) {
        let obj = {};
        obj.enableDefault = false;
        obj.type = val[i]['type'];
        obj.zone = val[i]['zone'];
        this.selectProZoneArr.push(obj);
      }
    },
    userZonesBtn() {
      if (this.selectProZoneArr.length > 0) {
        modifyZone(this.projectZoneId, this.selectProZoneArr)
          .then((res) => {
            if (res.data.code === 1) {
              this.$Message.success({
                content: '设置成功！',
                duration: 3
              });
              this.saveTabName = 'name1';
              this.clickProTabs('name1');
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 3
              });
            }
            this.reProjectZonesLoading = false;
          })
          .catch((err) => {
            console.log(err);
            this.reProjectZonesLoading = false;
            this.$Message.error('服务器连接失败！');
          });
      } else {
        this.$Message.info({
          content: '请至少选择一个可用域！',
          duration: 3
        });
        this.reProjectZonesLoading = false;
      }
    },
    // 导入工程
    beforeUpload(file) {
      this.uploadFile = file;
    },
    importProject() {
      let formData = new window.FormData();
      formData.append('file', this.uploadFile);
      if (!this.uploadFile) {
        this.$Message.error({
          content: '请选择文件',
          duration: 3
        });
        return false;
      }
      this.importProjectLoading = true;
      if (this.verticalRadio === 'EXCEL') {
        // 上传Excel
        this.importExcelTem(formData);
        return false;
      }
      this.axios
        .post(`${this.baseURL}/topo-edit/projects/json/async/file?mode=${this.mode}`, formData, {
          headers: { 'Content-Type': 'application/json' }
        })
        .then((res) => {
          if (res.data.code === 1) {
            let result = res.data.attribute.result;
            this.importProjectLoading = false;
            this.$Message.info({
              content: '工程导入中',
              duration: 2
            });
            this.createProModal = false;
            this.refreshProject();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
            this.importProjectLoading = false;
          }
        })
        .catch((err) => {
          this.importProjectLoading = false;
          console.log(err);
        });
    },
    canleImportProModal() {
      this.importProjectLoading = false;
      this.createProModal = false;
      this.uploadFile = null;
    },
    // 导入Excel模板
    importExcelTem(formData) {
      this.axios
        .post(`${this.baseURL}/topo-edit/excel/define/topo/generate?mode=${this.mode}`, formData, {
          headers: { 'Content-Type': 'application/json' }
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.importProjectLoading = false;
            this.$Message.info({
              content: '工程导入中',
              duration: 2
            });
            this.createProModal = false;
            this.refreshProject();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
            this.importProjectLoading = false;
          }
        })
        .catch((err) => {
          this.importProjectLoading = false;
        });
    },
    changeImportType(val) {
      if (val === 'only_structure') {
        this.supportExcelDis = true;
        this.verticalRadio = 'JSON';
      } else {
        this.supportExcelDis = false;
      }
    },
    changeFileType(val) {
      if (val === 'EXCEL') {
        this.supportTopoDis = true;
        if (this.mode === 'only_structure') {
          this.mode = 'complete';
        }
      } else {
        this.supportTopoDis = false;
      }
    },
    // 修改
    setCanModifyClick(item) {
      if (item.creator !== this.USER_ID && !this.isRootDesigner) {
        return { 'pointer-events': 'none' };
      }
    },
    setModifySrc(item) {
      if (item.creator !== this.USER_ID && !this.isRootDesigner) {
        return require('../../assets/project/modifys.png');
      } else {
        return require('../../assets/project/modifys-h.png');
      }
    },
    setDelSrc(item) {
      if (item.creator !== this.USER_ID && !this.isRootDesigner) {
        return require('../../assets/project/delNote-d.png');
      } else {
        return require('../../assets/project/delNote-h.png');
      }
    },
    // 限制上传类型
    handleFormatError(file, fileList) {
      this.uploadFile = null;
      this.$Message.error({
        content: '不支持当前文件类型，请选择json文件',
        duration: 3
      });
      return false;
    },
    handleFormatError2(file, fileList) {
      this.uploadFile = null;
      this.$Message.error({
        content: '不支持当前文件类型，请选择EXCEL文件',
        duration: 3
      });
      return false;
    },
    changeModal() {
      this.tabName = 'name1';
    },
    // 下载excel模板
    downLoadExcelTem() {
      downLoadExcel().then((res) => {
        console.log(res);
        if (res.data) {
          const msg = this.$Message.loading({
            content: '正在导出...',
            duration: 0,
            closable: true
          });
          //使用后台接口执行导出
          let ele = document.createElement('a'); // 创建下载链接
          ele.download = '模板'; //设置下载的名称
          ele.style.display = 'none'; // 隐藏的可下载链接
          ele.href = `/api/topo-edit/excel/define/topo/template`;
          // 绑定点击时间
          document.body.appendChild(ele);
          ele.click();
          // 然后移除
          document.body.removeChild(ele);
          setTimeout(msg, 3000);
          return;
        }
      });
    }
  }
};
</script>
<style scoped>
.uploadTypeWrap {
  color: orange;
  margin-bottom: 16px;
}
</style>
<style>
.creatProModal .ivu-modal-mask {
  z-index: 1001 !important;
}
.creatProModal .ivu-modal-wrap {
  z-index: 1001 !important;
}
</style>
